<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气查看</title>
  <script src="https://unpkg.com/amap-weather-icons@0.0.6/output/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    body {
      background-color: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .display {
      width: 600px;
      height: 800px;
      background-color: white;
      border: 2px solid #333;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .browser-bar {
      height: 40px;
      border-bottom: 1px dashed #ccc;
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    .browser-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px 40px; /* 增加左右内边距让内容居中 */
    }

    .current-weather {
      display: flex;
      margin-bottom: 30px; /* 增加底部间距 */
      align-items: center; /* 垂直居中 */
    }

    .weather-icon-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .weather-icon {
      margin-top: -25px;
      width: 200px;
      height: 200px;
      margin-bottom: -30px; /* 调整负值，使图标向下移动 */
    }

    .weather-desc {
      font-size: 40px; /* 增大字体 */
      margin-top: 0px;
      font-weight: bold;
      text-align: center;
    }

    .weather-temp-wind {
      font-size: 22px; /* 增大字体 */
      margin-top: 10px;
      text-align: center;
    }

    .date-time-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .current-date {
      font-size: 30px;
      font-weight: bold;
      margin-top: 20px;
    }

    .current-time {
      font-size: 50px; /* 增大字体 */
      font-weight: bold;
      margin: 15px 0;
    }

    .location {
      font-size: 24px; /* 增大字体 */
      color: #333;
    }

    .report-time {
      font-size: 14px; /* 增大字体 */
      color: #666;
    }

    .forecast {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .forecast-title {
      font-size: 16px; /* 增大字体 */
      margin-bottom: 15px;
      text-align: left;
    }

    .forecast-items {
      display: flex;
      flex-direction: column;
      gap: 15px; /* 增加预报项之间的间隙 */
    }

    .forecast-item {
      background-color: #e9e9e9; /* 加深背景灰色 */
      border-radius: 10px;
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between; /* 优化内容分布 */
    }

    .forecast-day {
      width: 80px;
      font-size: 18px;
      text-align: center; /* 星期文字居中 */
    }

    .forecast-icon {
      width: 50px;
      height: 50px;
      margin: 0 15px; /* 调整图标边距 */
    }

    .forecast-weather, .forecast-temp {
      font-size: 18px;
    }
  </style>
</head>
<body>
<div class="display">
  <div class="content">
    <div class="current-weather">
      <div class="weather-icon-container">
        <!-- 实时天气图标改为动态加载，初始值设为多云防止加载前空白 -->
        <amap-weather-icons class="weather-icon" size="200" icon="多云"></amap-weather-icons>
        <div class="weather-desc" id="current-weather-desc">多云</div>
        <div class="weather-temp-wind" id="current-temp-wind">24℃   东南风3级</div>
      </div>
      <div class="date-time-container">
        <div class="current-date" id="current-date">2025年4月16日</div>
        <div class="current-time" id="current-time">17:25</div>
        <div class="location" id="location">海淀区/北京</div>
        <div class="location" id="location"><br></div>
        <div class="report-time" id="report-time">数据发布时间: 2025-04-16 17:16</div>
      </div>
    </div>
    <div class="forecast">
      <div class="forecast-title">&nbsp;天气预报</div>
      <div class="forecast-items" id="forecast-items"></div>
    </div>
  </div>
</body>

<script>
  const weekMap = {
    '1': '星期一', '2': '星期二', '3': '星期三',
    '4': '星期四', '5': '星期五', '6': '星期六', '7': '星期日'
  };

 /* function updateCurrentTime() {
    const now = new Date();
    document.getElementById('current-date').textContent =
            `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`;
    document.getElementById('current-time').textContent =
            now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  }*/

  // 更新当前时间的函数，包括时区偏移
  function updateCurrentTime() {
    const now = new Date();
    const timezoneOffset = 8 * 60 * 60 * 1000; // 8 小时的毫秒数
    const localTime = new Date(now.getTime() + timezoneOffset); // 加上时区偏移

    const year = localTime.getFullYear();
    const month = String(localTime.getMonth() + 1).padStart(2, '0'); // 补零
    const day = String(localTime.getDate()).padStart(2, '0'); // 补零
    const hours = String(localTime.getHours()).padStart(2, '0'); // 补零
    const minutes = String(localTime.getMinutes()).padStart(2, '0'); // 补零

    document.getElementById('current-date').textContent = `${year}年${month}月${day}日`;
    document.getElementById('current-time').textContent = `${hours}:${minutes}`;
  }


  async function fetchCurrentWeather() {
    try {
      const response = await fetch('https://restapi.amap.com/v3/weather/weatherInfo?key=ee78c1636477a353f1ba8ee020137a77&city=110108&extensions=base');
      const data = await response.json();
      if (data.status === '1' && data.lives.length > 0) {
        const weatherData = data.lives[0];

        // 更新实时天气图标（关键修改点）
        const currentIcon = document.querySelector('.weather-icon');
        currentIcon.setAttribute('icon', weatherData.weather || '多云'); // 防止空值

        document.getElementById('current-weather-desc').textContent = weatherData.weather;
        document.getElementById('current-temp-wind').textContent =
                `${weatherData.temperature}℃   ${weatherData.winddirection}风${weatherData.windpower}级`;
        document.getElementById('location').textContent = `${weatherData.city}/${weatherData.province}`;
        document.getElementById('report-time').textContent =
                `数据发布时间: ${formatReportTime(weatherData.reporttime)}`;
      }
    } catch (error) {
      console.error('实时天气获取失败:', error);
    }
  }

  async function fetchForecastWeather() {
    try {
      const response = await fetch('https://restapi.amap.com/v3/weather/weatherInfo?key=ee78c1636477a353f1ba8ee020137a77&city=110108&extensions=all');
      const data = await response.json();
      if (data.status === '1' && data.forecasts.length > 0) {
        const forecastItems = document.getElementById('forecast-items');
        forecastItems.innerHTML = '';

        const forecasts = data.forecasts[0].casts.slice(0, 4);
        forecasts.forEach(cast => {
          const item = document.createElement('div');
          item.className = 'forecast-item';

          const dayDiv = document.createElement('div');
          dayDiv.className = 'forecast-day';
          dayDiv.textContent = weekMap[cast.week] || `星期${cast.week}`;

          const icon = document.createElement('amap-weather-icons');
          icon.className = 'forecast-icon';
          icon.setAttribute('size', '50');
          icon.setAttribute('icon', cast.dayweather || '多云'); // 防止空值

          const weatherDiv = document.createElement('div');
          weatherDiv.className = 'forecast-weather';
          weatherDiv.textContent = cast.dayweather;

          // 修正温度顺序：白天温度到晚上温度（daytemp ~ nighttemp）
          const tempDiv = document.createElement('div');
          tempDiv.className = 'forecast-temp';
          tempDiv.textContent = `${cast.daytemp}℃ ~ ${cast.nighttemp}℃`; // 关键修正点

          item.appendChild(dayDiv);
          item.appendChild(icon);
          item.appendChild(weatherDiv);
          item.appendChild(tempDiv);
          forecastItems.appendChild(item);
        });
      }
    } catch (error) {
      console.error('预报天气获取失败:', error);
    }
  }

  function formatReportTime(timeStr) {
    const date = new Date(timeStr);
    return date.toISOString().replace('T', ' ').substring(0, 16);
  }

  function init() {
    updateCurrentTime();
    fetchCurrentWeather();
    fetchForecastWeather();

    // 20 秒
    setInterval(updateCurrentTime, 20000);
    setInterval(() => {
      fetchCurrentWeather();
      fetchForecastWeather();
    }, 120000);
  }

  window.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>